<template>
  <div>
    <el-main>
      <div class="s_flex s_justify_content">
        <div class="left_menus">
          <!-- :unique-opened="true" -->
          <el-menu
            :default-openeds="['6', '7', '8']"
            collapse-transition
            class="el-menu-vertical-demo"
            @select="handselect"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu
              v-for="(item, index) in menu"
              :index="item.id"
              :key="index"
            >
              <template slot="title">
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :class="checkType == b.id ?'menu_active':''" v-for="(b, i) in item.list" :key="i" :index="b.id"
                  ><i :class="b.icon"></i>{{ b.name }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <div class="centet_chart" v-if="list">
          <analysisItem
            :title="title"
            :id="id"
            :list="list"
            :Etype="Etype"
            v-if="Etype == 6"
          />
          <Columnar
            :title="ColumTitle"
            :id="Columanar"
            :list="Columlist"
            v-if="Etype == 7"
          />
          <diagram
            :title="diagramTitle"
            :id="diagram"
            :list="diagramlist"
            v-if="Etype == 8"
          />
        </div>
        <div class="right_screen">
          <div>
            <h4>当前申请（专利权）人</h4>
            <div>
              <div style="margin: 15px 0">
                <p>
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                  >
                  <el-checkbox
                    @click.native="clickget(city, $event)"
                    class="check_p"
                    v-for="(city, i) in cities"
                    v-model="city.check"
                    :label="city.bname"
                    :key="city.id"
                    ><span
                      v-if="i == index"
                      v-for="(item, index) in list.color"
                      class="spanw"
                      :style="{ 'background-color': item }"
                      :key="index"
                    ></span
                    >{{ city.bname }}</el-checkbox
                  >
                </p>
              </div>
            </div>
            <div class="radios_item">
              <h4>申请年</h4>
              <el-radio-group v-model="radio">
                <p class="check_p"><el-radio :label="0">所有</el-radio></p>
                <p class="check_p"><el-radio :label="20">最近20年</el-radio></p>
                <p class="check_p"><el-radio :label="10">最近10年</el-radio></p>
                <p class="check_p">
                  <el-radio
                    :label="30"
                    class="s_flex s_align_items s_justify_content"
                  >
                    <div class="s_flex s_align_items s_justify_content">
                      <div style="width: 60px">
                        <el-input v-model="input" placeholder=""></el-input>
                      </div>
                      &nbsp; To &nbsp;
                      <div style="width: 60px">
                        <el-input v-model="input2" placeholder=""></el-input>
                      </div>
                    </div>
                  </el-radio>
                </p>
              </el-radio-group>
              <div class="check_p">
                <el-button type="primary" @click="analysis">
                  &nbsp; &nbsp; &nbsp; &nbsp;分析 &nbsp; &nbsp; &nbsp;
                  &nbsp;</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import echarts from "echarts";
import { trendTimes, trendCompany, trendPatent, trendLaw } from "@/api/user";
import analysisItem from "@/components/analysisItem";
import Columnar from "@/components/Columnar";
import diagram from "@/components/diagram";

export default {
  components: {
    analysisItem,
    Columnar,
    diagram,
  },
  data() {
    return {
      input: "",
      input2: "",
      radio: 0,
      checkAll: true,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      checkAllLength: [],
      id: "m_swiper",
      Columanar: "Columanar",
      diagram: "diagram",
      menu: [
        {
          id: "6",
          title: "时间趋势",
          list: [
            {
              id: "6-1",
              name: "申请（专利权）人申请趋势",
              icon: "iconfont icon-zhexiantu",
            },
            {
              id: "6-2",
              name: "申请（专利权）人公开趋势",
              icon: "iconfont icon-zhexiantu",
            },
            {
              id: "6-3",
              name: "申请（专利权）人授权趋势",
              icon: "iconfont icon-zhexiantu",
            },
          ],
        },
        {
          id: "7",
          title: "专利分布",
          list: [
            {
              id: "7-1",
              name: "发明专利分布",
              icon: "iconfont icon-zhuzhuangtu",
            },
            {
              id: "7-2",
              name: "新型专利分布",
              icon: "iconfont icon-zhuzhuangtu",
            },
            {
              id: "7-3",
              name: "外观专利分布",
              icon: "iconfont icon-zhuzhuangtu",
            },
          ],
        },
        {
          id: "8",
          title: "法律状态",
          list: [
            {
              id: "8-1",
              name: "简单法律状态",
              icon: "iconfont icon-zhuzhuangtu1",
            },
            {
              id: "8-2",
              name: "专利类型",
              icon: "iconfont icon-zhuzhuangtu1",
            },
          ],
        },
      ],
      list: [],
      Columlist: [],
      diagramlist: [],
      patent_body: [],
      type: 0,
      checkType:"6-1",
      time: 0,
      title: "申请（专利权）人申请趋势",
      ColumTitle: "发明专利分布",
      diagramTitle: "简单法律状态",
      Etype: 6,
    };
  },
  mounted() {
    this.getCheckList();
  },

  methods: {
    handleCheckAllChange(val) {
      if (val == false) {
        this.cities.map((item) => {
          item.check = false;
         this.patent_body=[]
        });
        this.getTime();
        this.getPatent();
        this.getLaw();
      } else {
        this.cities.map((item) => {
          item.check = true;
          this.patent_body.push(item.bname);
        });
        this.getTime();
        this.getPatent();
        this.getLaw();
      }

      //   this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    clickget(i, e) {
      if (e.target.tagName === "INPUT") {
        if (i.check == false) {
          this.cities.map((item) => {
            if (i.bname == item.bname) {
              this.patent_body.push(i.bname);
              item.check = true;
            }
          });
          this.getTime();
          this.getPatent();
          this.getLaw();
        } else {
          this.cities.map((item) => {
            if (i.bname == item.bname) {
              this.patent_body.splice(this.patent_body.indexOf(i.bname), 1);
              item.check = false;
            }
          });
          this.getTime();
          this.getPatent();
          this.getLaw();
        }
      }
    },
    async getCheckList() {
      try {
        this.cities = await trendCompany();
        this.cities.map((item) => {
          if (item.check) {
            this.checkAllLength.push(item.check);
            this.patent_body.push(item.bname);
          }
        });
        this.getTime();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    analysis() {
      this.getCheckList();
      this.getPatent();
      this.getLaw();
    },
    async getTime() {
      try {
        this.list = await trendTimes({
          patent_body: this.patent_body,
          type: this.type,
          time: this.input ? `${this.input},${this.input2}` : this.radio,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getPatent() {
      try {
        this.Columlist = await trendPatent({
          patent_body: this.patent_body,
          type: this.type,
          time: this.input ? `${this.input},${this.input2}` : this.radio,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getLaw() {
      try {
        this.diagramlist = await trendLaw({
          patent_body: this.patent_body,
          type: this.type,
          time: this.input ? `${this.input},${this.input2}` : this.radio,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    handselect(key, keyPath) {
      this.checkType = key
      this.Etype = key.split("-")[0];
      if (key.split("-")[0] == 6) {
        this.type = key.split("-")[1];
        this.getTime();
      } else if (key.split("-")[0] == 7) {
        this.type = key.split("-")[1];
        this.getPatent();
      } else {
        this.type = key.split("-")[1];
        this.getLaw();
      }
      if(key == '6-1'){
        this.title = "申请（专利权）人申请趋势";
      }else if(key == '6-2'){
        this.title = "申请（专利权）人公开趋势";
      }else if(key == '6-3'){
        this.title = "申请（专利权）人授权趋势";
      }

      if(key == '7-1'){
        this.ColumTitle = "发明专利分布";
      }else if(key == '7-2'){
        this.ColumTitle = "新型专利分布";
      }else if(key == '7-3'){
        this.ColumTitle = "外观专利分布";
      }

      if(key == '8-1'){
        this.diagramTitle = "简单法律状态";
      }else if(key == '8-2'){
        this.diagramTitle = "专利类型";
      }
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>


<style lang="less" scoped>
.left_menus {
  width: 20%;
  border: 1px solid #e6e9f0;
}
.right_screen {
  width: 20%;
}
.centet_chart {
  width: 60%;
}
.annularChart {
  width: 900px;
  height: 637px;
  margin: 0 auto;
  background-color: #fff;
  // transform: scale(.9);
}
.check_p {
  margin-top: 15px;
}
.radios_item {
  margin-top: 50px;
}
.spanw {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 5px;
  margin-right: 5px;
}
  .menu_active{
   border-right:3px solid #3377FF;
  }
</style>